import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {Router} from "@angular/router";
import {CheckloginService} from "../services/checklogin.service";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  public title: any = '登录';
  public cancel: any = 'assets/cancel/u786.png';
  public more: any = ' assets/more/u742.png';
  // 控制手机号输入框边框的阴影
  public telColor: any = false;
  // 手机号码正确
  public successTel: any = false;
  // 控制提示手机号不存在信息状态
  public emptyTel: any = false;
  // 控制错误手机号格式信息
  public errorTel: any = false;
  // 控制验证码输入框边框的阴影
  public checkColor: any = false;
  // 控制验证码为空时信息状态
  public emptyCheck: any = false;
  // 判断验证码错误时信息状态
  public errorCheck: any = false;
  // 显示绑定成功提示框
   public successMsg: any = false;
  // 验证码
  public num: any = 59;
  // 控制显示倒计时
  public check: any = true;
  // 控制显示发送验证码提示框
  public showCheckNum: any = false;
  // 控制显示绑定成功提示框
  public showSuccess: any = false;
  // 控制跳转首页时间
  public num1: any = 3;
  // 控制显示跳转时间信息
  public showSkiptime = false;
  // 控制绑定按钮状态
  public useBangding = false;
  // 手机号码
  public tel: any;
  // 短信验证码
  public checkNums: any;
  public checkNumsByUser: any;
  // 显示验证码信息提示框（类似短信）
  public showNumboox: any = false;
  public e1: any;
  public e2: any;
  constructor( private http: HttpClient, private router: Router, private service: CheckloginService) { }

  ngOnInit() {
  }
  // 手机号输入框获取焦点
  onFocusTel(e) {
    this.telColor = true;
    this.errorTel = false;
    this.emptyTel = false;
  }
  onChange() {
    this.successTel = false;
  }
  // 手机号输入框失去焦点
  onBlurTel(e) {
    this.e1 = e;
    this.telColor = false;
    if ( e.target.value === '') {
      this.emptyTel = true;
      this.errorTel = false;
      return false;
    } else if (!(/^1[3456789]\d{9}$/.test(e.target.value))) {
       this.emptyTel = false;
       this.errorTel = true;
       return false;
    }  else {
      // 提示手机号输入正确
      this.successTel = true;
      this.tel = e.target.value;
      return true;
    }
  }
  // 验证码输入框获取焦点
  onFocuscheck(e) {
    this.checkColor = true;
    this.emptyCheck = false;
    this.errorCheck = false;
  }
  // 验证码输入框失去焦点
  onBlurcheck(e) {
    this.e2 = e;
    this.checkColor = false;
    if ( e.target.value === '') {
      this.emptyCheck = true;
      return false;
    } else if (!(/^\d{6}$/.test(e.target.value))) {
      this.emptyCheck = false;
      this.errorCheck = true;
      return false;
    } else {
       this.checkNumsByUser = e.target.value;
       return true;
    }

  }
  // 生成验证码
  checkNum() {
    if (this.onBlurTel(this.e1)) {
      let that = this;
      this.showCheckNum = true;
      this.check = false;
      const url = 'http://192.168.2.228:8080/user/sendpin';
      const heads = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      };
      const params = {
        u_tel: this.tel
      };
      this.http.post(url, params, heads).subscribe( res => {
        this.checkNums = res['data'];
        console.log(this.checkNums);
        this.showNumboox = true;
      });
      // 设置显示验证码为6s
      setTimeout(() => {
        this.showNumboox = false;
      }, 6000);
      let id = setInterval(function() {
        that.num = that.num - 1 ;
        if (that.num === 57) {
          that.showCheckNum = false;
        } else if ( that.num === 0) {
          clearInterval(id);
          that.num = 60;
          that.check = true;
        }
      }, 1000);
    }
  }
  // 绑定手机号
  bangding() {
    const url = 'http://192.168.2.228:8080/user/login';
    const heads = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    const params = {
      u_id: localStorage.user,
      u_tel: this.tel,
      u_cheaknumber: this.checkNumsByUser
    };
    if ( this.onBlurTel( this.e1) && this.onBlurcheck( this.e2)) {

      this.http.post( url, params, heads).subscribe( res => {
        // 验证码输入正确
        if ( res['code'] === 0) {
          let that = this;
          this.showSuccess = true;
          let id = setInterval(() => {
            that.num1 = that.num1 - 1;
            if (that.num1 === 1) {
              that.showSuccess = false;
            } else if (that.num1 === 0) {
              clearInterval(id);
              // 把用户添加到localStorage
              this.service.addLogin( res['data']['u_id']);
              this.router.navigate(['/tabar/shop']);
              that.num1 = 3;
            }
          }, 1000);
        } else {
          this.errorCheck = true;
        }
      });
      }
    }
  // 返回上一页
  goback() {
    history.go(-1);
  }

}
